<template>
  <el-card>
    <div slot="header" class="clearfix">

      <pageTool>
        <template #header>
          <div @click="addFn">添加分页</div>
        </template>
        <template #footer>
          <el-input
            v-model="filterData.title_contains"
            placeholder="请输入筛选关键字"
            style="width:500px"
            @change="filterFn(filterData)"
          >
            <el-button slot="append" @click="filterFn(filterData)">筛选</el-button>
          </el-input>
        </template>
      </pageTool>
    </div>

    <!-- 表格 -->
    <el-table

      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="title"
        label="标题"
      />
      <el-table-column
        header-align="center"
        prop="content"
        label="内容"
      >
        <template v-slot="{row}">
          <div v-html="row.content" />
        </template>
      </el-table-column>
      <el-table-column v-slot="{row}" label="操作" align="center">
        <el-button size="small" type="primary" @click="editFn(row.id)">编辑</el-button>
        <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog
      title="添加页面"
      :visible.sync="showDialog"
    >
      <el-form ref="form" :model="formData" label-width="100px" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <VueEditor v-model="formData.content" @blur="$refs.form.validateField('content')" />
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-button size="small" type="primary" @click="submitFn">确定</el-button>
          <el-button size="small" @click="closeFn">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 页码 -->
    <el-row type="flex" justify="center">
      <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        :page-size="pageClassify._limit"
        :current-page.sync="currentPage"
        @current-change="currentChange"
      />

    </el-row>
  </el-card>

</template>

<script>
import { GetpageList, AddPage, appointPage, editPage, delPage, filerPage, getPages } from '@/api/pages'
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      total: 0,
      tableData: [],
      showDialog: false,
      currentPage: 1,
      // keyword: '',

      forn: {
        // 条数
        _limit: 2,
        // 页数
        _start: 0
      },
      rules: {
        title: [
          { required: true, message: '请填写标题内容', trigger: 'blur' },
          { min: 4, max: 15, message: '标题长度应为4-15字符之间', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写内容', trigger: 'blur' }
        ]
      },
      formData: {
        title: '',
        content: ''
      },
      filterData: {
        title_contains: ''
      }

    }
  },
  computed: {
    pageClassify() {
      return {
        _limit: 2, // 每页的长度
        _start: (this.currentPage - 1) * 2
      }
    }
  },
  async created() {
    this.initData()
    const res = await getPages()
    // console.log(res.data)
    this.total = res.data
    console.log(this.total)
  },
  methods: {
    async getPages() {
      const res = await getPages(this.filterData)
      console.log(142, res)
      this.total = res.data
      console.log(144, this.total)
    },
    async initData() {
      const res = await GetpageList(this.pageClassify)
      // console.log(123, res.data.length)
      this.tableData = res.data
    },
    addFn() {
      this.showDialog = true
    },
    async submitFn() {
      await this.$refs.form.validate()
      if (this.formData.id) {
        const msg = await editPage(this.formData)
        console.log(msg)
      } else {
        // 添加页面
        await AddPage(this.formData)
      }
      this.closeFn()
      // 刷新页面
      this.initData()
    },
    // 关闭弹窗
    closeFn() {
      // 清空表单
      this.formData = {
        title: '',
        content: ''
      }
      // 清空表单校验
      this.$refs.form.resetFields()
      // 关闭弹窗
      this.showDialog = false
    },
    // 编辑页面
    async editFn(id) {
      this.showDialog = true
      const res = await appointPage(id)
      this.formData = res.data
    },
    // 删除页面
    delFn(id) {
      this.$confirm('是否删除此页面?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delPage(id)
        console.log(res)
        this.initData()
      })
    },
    // 筛选页面
    async filterFn(data) {
      this.currentPage = 1
      const res = await filerPage(data)
      this.tableData = res.data

      this.getPages()
      console.log(this.total)
    },
    // 实现分页
    currentChange(page) {
      this.forn._start = (page - 1) * 2
      console.log(this.forn._start)
      this.initData()
    }

  }

}
</script>

<style lang="scss" scoped>
.pages{
  margin-top: 20px;
}
</style>
